import React from 'react'
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts'

var data = [1, 2, 3, 4, 5, 6, 7];
const dataShadow = [];
var yMax = 8;
for (var i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
}
export default class 渐变 extends React.Component {
    constructor() {
        super();
        this.getOption = {
            xAxis: {
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {},
            series: [
                {
                    data,
                    type: 'bar',
                    animation: true,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#83bff6'},
                                {offset: 0.5, color: '#188df0'},
                                {offset: 1, color: '#188df0'}
                            ]
                        )
                    },
                },
                {
                    barGap: '-100%',
                    barCategoryGap: '40%',
                    data: dataShadow,
                    type: 'bar',
                    itemStyle: {
                        color: 'rgba(0,0,0,0.05)'
                    }
                }
            ],
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
        }
    }

    render() {
        var self = this;
        return <div>
            <h1>
                echarts-for-react 渐变
            </h1>
            <div>
                <ReactEcharts
                    option={self.getOption}
                    notMerge={true}
                    lazyUpdate={true}
                    theme={"theme_name"}/>
            </div>
            <div>
                <h1>渐变</h1>
            </div>

        </div>
    }

}